<template>
	<div class="form-container">
		<div class="form-top"></div>
		<div class="form-breadcrumb">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>活动列表</el-breadcrumb-item>
				<el-breadcrumb-item>添加奖品</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="form-content">

			<el-form ref="form" :model="form" :rules="rules" label-width="150px">

				<el-form-item label="奖品类型" prop="typePrize">
					<el-select v-model="typePrize" placeholder="请选择">
						<el-option v-for="item in typeOptions" :key="item.value" :label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="奖品名称" prop="name">
					<el-col :span="9">
						<el-input v-model="form.name" placeholder="请输入奖品名称"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="得奖概率" prop="ratio">
					<el-col :span="9">
						<el-input v-model="form.ratio" placeholder="请输入得奖概率"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="奖品图标" prop="image">
				  <el-col :span="9">
				    <el-upload
				      action="/api/client/base/uploadfile"
				      list-type="picture-card"
				      :on-preview="handlePictureCardPreview"
				      ref="upload"
				      :on-remove="handleRemove"
				      :on-success="handleAvatarSuccess"
				      :before-upload="beforeAvatarUpload"
				      :auto-upload="true"
				      :limit="50"
				      :headers="myHeaders"
				      :file-list="fileList"
				      accept="image/jpeg, image/jpg, image/gif, image/png"
				      :multiple="false">
				      <i class="el-icon-plus"></i>
				    </el-upload>
				    <el-dialog :visible.sync="dialogVisible">
				      <img width="100%" :src="dialogImageUrl" alt="">
				    </el-dialog>
				  </el-col>
				</el-form-item>
				<el-form-item label="排序位置" prop="sort">
					<el-col :span="9">
						<el-input v-model="form.sort" placeholder="排序位置"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="发放数量" prop="quantity">
					<el-col :span="9">
						<el-input v-model="form.quantity" placeholder="发放数量"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item>
					<el-row>

						<el-button type="danger" @click="confirmAdd('form')">立即保存</el-button>
						<el-button type="default" @click="cancel()">返回</el-button>
					</el-row>
				</el-form-item>

			</el-form>
		</div>
	</div>

</template>

<script>
	export default {
		data() {
			return {
				validate: false,
				form: {
					typePrize: '',//奖品类型
					name: '',
					ratio: '',
					sort: '',
					image:'',//奖品图标
					quantity:'',
				},
				typeOptions: [{
					value: 1,
					label: '礼包'
				}, {
					value: 2,
					label: '优惠券'
				}, ],
				 typePrize: '',//奖品类型
				fileList: [],
				dialogImageUrl: "",
				dialogVisible: false,
				filter_keyword: '',
				myHeaders: {
				  'access-token': this.$store.state.token, //这里重新定义了请求头
				  'Authorization': this.$store.state.token,
				  'user-id': this.$store.state.user_id
				},
				rules: {
				  name: [
				    {required: true, message: '请输入奖品名称', trigger: 'blur'},
				  ],
				  image: [
				    {required: true, message: '请上传奖品图标', trigger: 'blur'},
				  ],
				  sort: [
				    {required: true, message: '请输入排序', trigger: 'blur'},
				  ],
				},

			}
		},
		mounted() {},
		methods: {
			handleRemove(file, fileList) {
			  this.fileList = fileList
			},
			handlePictureCardPreview(file) {
			  console.log('file', file);
			  this.dialogImageUrl = file.url;
			  this.dialogVisible = true;
			},
			handleAvatarSuccess(res, file, fileList) {
			  console.log('fileList', fileList);
			  this.fileList = fileList
			},
			beforeAvatarUpload(file) {
			  const isLt2M = file.size / 1024 / 1024 < 2;
			  if (!isLt2M) {
			    this.$message.error('上传商品图片大小不能超过 2MB!');
			  }
			  return isLt2M;
			},
			confirmAdd(form) {
				this.validateFormData(form);
				if (this.validate) {
					const _ths = this;
                   if (this.fileList.length > 0) {
                     this.fileList.map(v => {
                       if (v.response) {
                         _ths.form.image = v.response.data.id;
                       } else {
                         _ths.form.image = v.id;
                       }
                     })
                   }
					this.$http.post('/api/root/UserLevel/setList', {
							...this.form
						})
						.then(rest => {
							if (rest.msg == 'ok') {
								this.$message.success('新增成功');
								setTimeout(function() {
									_ths.$router.push({
										name: 'userLevelList'
									})
								}, 800)
							} else {
								this.form = {
									...this.form,
								};
								this.$message.error(rest.msg);
							}
						})
				}
			},
			cancel() {
				this.$router.push({
					name: 'lotteryGrid'
				})
			},

			/**
			 * 验证表单数据
			 * @param form
			 */
			validateFormData(form) {
				this.$refs[form].validate((valid) => {
					if (!valid) {
						this.$message({
							message: '表单数据未填写完整,操作失败！',
							type: 'warning'
						});
						return false;
					}
					this.validate = true;
					return true;
				})
			},
		}
	}
</script>
<style lang="less" scoped>
	@import "index.less";
</style>
